<template>
    <div class="custom-header">
        <span class="header-title">人机增强多智能体量化评估与演化</span>
        <div class="parallelogram-box">
            <div class="parallelogram-father">
                <div class="parallelogram-children">
                    <div class="shape" style="background-color: rgba(66,255,231,1);"></div>
                    <div class="shape" style="background-color: rgba(66,255,231,0.5);"></div>
                    <div class="shape" style="background-color: rgba(66,255,231,0.3);"></div>
                    <span :style="{ color: typeIndex === 0 ? '#42FFE7' : '#FFFFFF' }"
                        @click="handleClick('first', 0)">模型</span>
                    <!-- <span @click="handleClick('second')">性能</span> -->
                    <span :style="{ color: typeIndex === 2 ? '#42FFE7' : '#FFFFFF' }"
                        @click="handleClick('third', 2)">场景</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps(['typeIndex'])
const emit = defineEmits(['change-type-event'])

const handleClick = (item, index) => {
    emit('change-type-event', item, index)
}

</script>

<style scoped lang="scss">
.custom-header {
    width: 100%;
    height: computeVh(60);
    padding: computeVh(10) 0;
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 80, 109, 0.25) 0%, rgba(0, 148, 175, 0.25) 100%);

    .header-title {
        flex-shrink: 0;
        font-weight: bold;
        font-size: computeVw(26);
        color: #F3FFF8;
        margin: 0 computeVw(23);
        // text-shadow: 0px 3px 0px rgba(2, 130, 151, 0.75);
    }

    .parallelogram-box {
        flex-shrink: 0;
        // flex: 1;
        height: computeVh(40);
        background-color: transparent;
        transform: skewX(-30deg);
        /* 根据需要调整角度 */
        // margin-top: 10px;
        width: calc(100% + 100px);
        border: 0px;
        border: 1px solid #2b4d55;
        padding: 5px 0 5px 5px;
        overflow: hidden;
        position: relative;

        .parallelogram-father {
            position: absolute;
            display: flex;
            align-items: center;
            width: calc(100% + 100px);
            height: computeVh(40);
            background-color: linear-gradient(90deg, #0198AA 0%, rgba(1, 152, 170, 0.1) 100%);
            transform: skewX(0);
            /* 根据需要调整角度 */
            // margin: 50px auto;
            overflow: hidden;

            .parallelogram-children {
                position: absolute;
                height: computeVh(30);
                display: flex;
                align-items: center;
                // background-color: pink;

                .shape {
                    width: computeVw(15);
                    height: computeVh(30);
                    transform: skewX(0);
                    overflow: hidden;
                    margin-left: computeVw(5);
                }

                span {
                    transform: skewX(30deg);
                    font-weight: bold;
                    font-size: computeVw(16);
                    margin-left: computeVw(100);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>